<template>
  <div class="container-fluid">
    <div class="row center-block">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-12">
            <div class="box-body">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">用户列表</h3>
                  <div class="box-tools pull-right">
                    <el-button type="success" @click="showQuery">
                      <i class='fa fa-search'>高级查询</i>
                    </el-button >
                    <el-button type="primary" @click='()=>isExport = true'>
                      <i class='fa fa-cloud-download'>导出当前结果</i>
                    </el-button>
                  </div>
                </div>
                <div class="box-body">
                  <section class="content" id="departEmployees">
                    <div class="row">
                      <el-table stripe :sort-change="sortChanged" :empty-text="emptyText" :row-key='id' :highlight-current-row='true' :data="users" border style="width: 100%">
                        <el-table-column fixed type='index' :index='indexMethod' label="序号" :width='80'></el-table-column>
                        <el-table-column v-for='col in this.columns' :fixed='col.fixed?col.fixed:false' :key="col.prop" :width='col.width' :prop='col.prop' :label='col.label' :sortable='col.sortable' :formatter='col.formatter'></el-table-column>
                        <el-table-column fixed="right" label="操作" width="320">
                          <template scope="scope">
                            <el-button type="success" @click="view(scope.row)">
                              <i class="fa fa-eye">查看</i>
                            </el-button>
                            <el-button type="primary" v-if="util.hasRole(1)" @click="editRow(scope.row)">
                              <i class="fa fa-edit">编辑</i>
                            </el-button>
                            <el-button type="warning" v-if="util.hasRole(1)" @click="deleteRow(scope.row)">
                              <i class="fa fa-trash">删除</i>
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                  </section>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title='高级查询' :visible.sync="queryVisible" :modal="false" size="small">
      <UserQuery ref='userQuery'></UserQuery>
      <span slot="footer" class="dialog-footer">
        <el-button @click="queryVisible = false">关 闭</el-button>
        <el-button type="primary" @click="submit">查 询</el-button>
      </span>
    </el-dialog>

    <el-dialog title='用户信息' v-if="viewVisible" :before-close="()=>viewVisible = false" :visible.sync="viewVisible" top='10px' width="80%" :modal="false" size="large">
      <UserDataView v-if='viewVisible' :editable='false' ref='userView' :userData='selectedUser'></UserDataView>
      <span slot="footer" class="dialog-footer">
        <el-button @click="viewVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑用户信息" v-if="editVisible" :visible.sync="editVisible" :before-close="()=>editVisible = false" top='10px' width="80%" :modal="false" size="large">
      <UserDataView v-if='editVisible' :editable='true' ref='userEditView' :userData='selectedUser'></UserDataView>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">关 闭</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title='提交审核' v-if="approve" :visible.sync="approve" :before-close="()=>approve = false" :modal="true" width="20%">
      <ApproveReq ref="approveReq"></ApproveReq>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doDispatch">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title='导出数据' v-if="isExport" :visible.sync="isExport" :before-close="()=>isExport = false" :modal="true" width="20%">
      <ExportUserData ref='exportUserDataView'></ExportUserData>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportdata">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Common from "./common"
import RestApi from "../../common/restapi"
import Utils from "../../common/utils"
import PersonUtils from "../../common/personUtils"
import UserQuery from "../mycomponents/users/userQuery"
import ExportUserData from "../mycomponents/users/ExportUserData"
import ApproveReq from '../mycomponents/approve/approveReq'
import UserDataView from "./UserDataView"
import approveUtils from "../../common/approveUtils"
let approveUtil = new approveUtils()
let util = new Utils()
let personUtil = new PersonUtils()
export default {
  name: 'Users',
  components: {
    UserQuery,
    UserDataView,
    ExportUserData,
    ApproveReq
  },
  data() {
    return {
      name: '',
      queryVisible: false,
      editVisible: false,
      viewVisible: false,
      columns: util.getUsersColumns(),
      emptyText: '空',
      id: 'id',
      names: [],
      query: {
        birtFrom: { time: '' },
        birtTo: { time: '' }
      },
      util:util,
      departs: null,
      queryData: util.getDefaultUserQueryData(4),
      users: [],
      total: 1,
      pageSizes: [5,10, 20, 30, 40, 50],
      pagesize: 10,
      currentPage: 1,
      selectedUser: util.getDefaultSelectedUser(),
      approve:false,
      operation:'',
      isExport:false,
      helper:new Common()
    }
  },
  created: function() {
    this.$nextTick(() => {
      this.getData()
      approveUtil.listApprover()
    })
  },
  methods: {
    getEmptyText() {
      return '空'
    },
    showQuery() {
      this.queryVisible = true
    },
    view(row) {
      console.log('view data:' + JSON.stringify(row))
      var that = this
      this.getUser(row.id, function(data) {
        console.log('加载查看用户数据:'+JSON.stringify(data))
        if(util.parseData(data, that.selectedUser.data,that))
        that.viewVisible = true
      });
    },
    editRow(row) {
      console.log('edit data:' + JSON.stringify(row))
      var that = this
      this.getUser(row.id, function(data) {
        console.log('加载用户数据:'+JSON.stringify(data))
        if(util.parseData(data, that.selectedUser.data,that))
        that.editVisible = true
      });
    },
    sortChanged(sortProp) {
      this.queryData.orders.fields = sortProp.prop
      this.queryData.orders.desc = sortProp.order
    },
    getUser(id, callback) {
      var that = this
      util.getUserData(id, (response) => {
        if (response.body.result == 1) {
          console.log('get user data id ' + JSON.stringify(response.body))
          console.log(' callback:'+ callback)
          callback(response.body.body)
        }
      }, (response) => {
        console.log('get user failed:' + response.data)
      })
    },
    indexMethod(index){
      var res = this.pagesize * (this.currentPage -1) + index + 1
      console.log('index method : '+ res)
      return res
    },
    getData() {
      var that = this
      util.queryUserData(this.queryData,function(response) {
        that.users = response.body.body.rows
        that.total = response.body.body.total
      }, function(response) {
        console.log('query failed:' + response.data)
      })
    },
    submit(e) {
      this.queryVisible = false
      this.queryData.conditions = this.$refs.userQuery.getData()
      this.queryData.page.count = this.pagesize
      this.currentPage = 1
      this.queryData.page.number = this.currentPage - 1
      this.getData()
    },
    exportdata() {
      var filename = this.$refs.exportUserDataView.getData()
      if(filename){
        personUtil.exportData(this.queryData,filename.fileName)
        this.isExport = false
      }
    },
    showSucInfo(info){
      this.$message({
        message: info,
        type: 'info'
      });
    },
    showErrorInfo(info){
      this.$message({
        message: info,
        type: 'error'
      });
    },
    doDispatch(){
      var that = this
      personUtil.dispatch(this,this.selectedUser.data,(response)=>{
        if (response.body.result == 1){
          that.approve=false
          that.showSucInfo('操作成功!')
          that.getData()
          if(that.editVisible){
            that.editVisible = false
          }
        }
        else{
          that.showErrorInfo('操作失败,请稍后重试!')
        }
      },(response)=>{
        that.showErrorInfo('网络异常,请稍后重试!')
      })
    },
    getOperation(){
      return this.operation
    },
    update() {
      var userData = this.$refs.userEditView.getData()
      if(!userData){
        return
      }
      this.selectedUser = userData
      this.operation = 'update'
      if(util.hasRole(4)){
        this.doDispatch()
      }
      else{
        this.operation = 'update'
        this.approve = true
      }
    },
    deleteRow(row) {
      var that = this
      this.operation = 'delete'
      this.getUser(row.id, function(data) {
        if(util.parseData(data, that.selectedUser.data,that))
        if(util.hasRole(4)){
          util.deleteConf(that,()=>{
            console.log("delete resume");
            that.doDispatch()
          })
        }
        else{
          that.approve = true
        }
      });
    },
    handleSizeChange(val) {
      this.queryData.page.count = val
      this.getData()
      this.pagesize = val
    },
    handleCurrentChange(val) {
      this.queryData.page.number = val -1
      this.getData()
      this.currentPage = val
    }
  },
  mounted: function() {
    this.$nextTick(() => {
      this.helper.autoheight("departEmployees")
    })
  }
}
</script>

<style>
/* Using the bootstrap style, but overriding the font to not draw in
   the Glyphicons Halflings font as an additional requirement for sorting icons.

   An alternative to the solution active below is to use the jquery style
   which uses images, but the color on the images does not match adminlte.

@import url('/static/js/plugins/datatables/jquery.dataTables.min.css');
*/

@import url('/static/js/plugins/datatables/dataTables.bootstrap.css');

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
  font-family: 'FontAwesome';
}

table.dataTable thead .sorting:after {
  content: "\f0dc";
}

table.dataTable thead .sorting_asc:after {
  content: "\f0dd";
}

table.dataTable thead .sorting_desc:after {
  content: "\f0de";
}

.fade {
  opacity: 0;
}

.datetime-picker input {
  height: 2.5em !important;
  border-radius: 0;
  box-shadow: none;
  border-color: #d2d6de;
}

.show {
  opacity: 1;
  margin-left: auto;
  margin-right: auto;
}

.modal-content {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #fff;
  margin-top: 150px;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .3rem;
  outline: 0;
}

.modal-body {
  padding: 0px 30px 0px 0px;
}

h5,
h5 {
  font-size: 2rem;
}

modal.fade .modal-dialog {
  padding-top: 80px;
}

@media screen and (min-width: 768px) {
  .usermodal-dialog {
    width: 80%;
    margin: 10px auto;
  }
}

#viewModal .modal-dialog {
  width: 80%;
  margin: 10px auto;
}

#viewModal {
  padding-top: 230px;
}
</style>
